<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.0.4.min.js" charset="utf-8"></script>
        <div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;">

        </div>
        <!--<button @click="liu">开</button>-->
        <button @click="startScreen">开启桌面共享</button><br>
        <button @click="startCamera">开启摄像头</button>&emsp;&emsp;<button @click="stopCamera">关闭摄像头</button><br>
        <button @click="startMicrophone">开启麦克风</button>&emsp;&emsp;<button @click="stopMicrophone">关闭麦克风</button><br>
        <button @click="startPushing">开启直播</button>&emsp;&emsp;<button @click="stopPushing">关闭直播</button>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                livePusher:null,
                path:'',
                videoEffectManager:null,
                cameraStreamId:null,
                screenStreamId:null

            },
            methods:{
                startScreen(){
                    this.livePusher.startScreenCapture().then((streamId) => {
                        this.screenStreamId = streamId;
                        alert('屏幕分享成功');
                    }).catch((error) => {
                        alert('屏幕分享失败：'+ error.toString());
                    });

                },

                startCamera(){
                    this.livePusher.startCamera().then((streamId) => {
                        this.cameraStreamId = streamId;
                        alert("已开启")
                    }).catch((error) => {
                        alert('打开摄像头失败：'+ error.toString());
                    });


                    //设置镜像效果
                    this.videoEffectManager.setMirror({
                        streamId: this.cameraStreamId,
                        mirrorType: 1
                    });


                },
                stopCamera(){
                    //关闭摄像头
                    alert("关闭摄像头")
                    this.livePusher.stopCamera();


                },
                startMicrophone(){
                    // 打开麦克风
                    this.livePusher.startMicrophone().then(function () {
                        alert("已开启")
                    })
                },
                stopMicrophone(){
                    // 关闭麦克风
                    alert("关闭麦克风")
                    this.livePusher.stopMicrophone();
                },
                startPushing(){

                    if (this.screenStreamId!=null){
                        this.videoEffectManager.setLayout([{
                            streamId: this.screenStreamId,
                            x: 640,
                            y: 360,
                            width: 1280,
                            height: 720,
                            zOrder: 1
                        }, {
                            streamId: this.cameraStreamId,
                            x: 160,
                            y: 90,
                            width: 320,
                            height: 180,
                            zOrder: 2
                        }]);
                    }




                    //开始推流
                    this.livePusher.startPush(this.path);
                    alert(this.path)
                },
                stopPushing(){
                    alert("直播已关闭")
                    this.livePusher.stopPush(this.path);
                },
                /*liu(){
                    axios.get("http://localhost:9302/sinatv/begin").then((resp)=>{
                        this.path=resp.data.msg
                    })
                }*/
            },
            created(){

                axios.get("http://localhost:9302/sinatv/begin").then((resp)=>{
                    this.path=resp.data.msg
                })

                this.livePusher = new TXLivePusher();
                this.livePusher.setRenderView('id_local_video');
                // 设置视频质量
                this.livePusher.setVideoQuality('720p');
                // 设置音频质量
                this.livePusher.setAudioQuality('standard');
                // 自定义设置帧率
                this.livePusher.setProperty('setVideoFPS', 25);
                // 打开摄像头
                //this.livePusher.startCamera();
                // 打开麦克风
                //this.livePusher.startMicrophone();



                //获取视频效果管理实例
                this.videoEffectManager = this.livePusher.getVideoEffectManager();

                this.videoEffectManager.enableMixing(true);

                this.videoEffectManager.setMixingConfig({
                    videoWidth: 1280,
                    videoHeight: 720,
                    videoFramerate: 25
                });


            }
        })
    </script>

</body>
</html>